<template>
  <div>首页</div>
  <h2>{{ str }}</h2>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <h3>{{ str.split('').reverse().join('') + ',' }}</h3>
  <hr />
  <h3>{{ reStr }}</h3>
  <h3>{{ reStr }}</h3>
  <h3>{{ reStr }}</h3>
  <h3>{{ reStr }}</h3>
  <button @click="btnClick">点击获取反转后的str</button>
  <hr />
  <h4>{{ arr }}</h4>
  <h4>{{ newArr }}</h4>
</template>
<script setup>
import { computed, ref } from 'vue'
// 1：定义一个响应式数据渲染  2：响应式数据要有一个反转的渲染
/*
  computed：功能还是以前的功能。只是语法变了
  用法：
     1：导入  import {computed} from 'vue'
     2:const 变量名 = computed(()=>{
        return 新的值
     })
      const 变量名 = computed({
        get(){
          return 新的值
        },
        set(value){
          ....
        }
      })

     3:访问：
       js:变量名.value
       html:变量名
*/
const str = ref('abcdef')
const reStr = computed(() => {
  return str.value.split('').reverse().join('') + '!!!'
})
const btnClick = () => {
  console.log(reStr)
}

// 数组:[{id:1},{id:1},{id:2}]
const arr = ref([{ id: 1 }, { id: 1 }, { id: 2 }])
// 通过计算属性拿到去重后的数组

// const newArr = computed(() => {
//   // 去重：filter  找出id为项的下标与filter函数的下标做对比，如果下标相同，说明就是当前项，保留，如果下标不相同，有重复的，就要去掉
//   return arr.value.filter((item, index, initArr) => {
//     //  当前下标  index
//     // item.id所在下标:initArr.findIndex(i=>item.id===i.id)
//     const _index = initArr.findIndex(i => item.id === i.id)
//     return _index === index
//   })
// })
const newArr = computed({
  get () {
    return arr.value.filter((item, index, initArr) => {
      const _index = initArr.findIndex(i => i.id === item.id)
      return _index === index
    })
  },
  set (value) {
    console.log(value)
  }
})
// setTimeout(() => {
//   newArr.value = [1, 2, 3, 4, 5, 6]
// }, 1000)
</script>
